<template>
  <div id="chart-container">
    <el-card class="head-card">
      <ul>
        <myLi :num="listData.increment_users" text="今日新增用户"></myLi>
        <myLi :num="listData.total_users" text="总用户量"></myLi>
        <myLi
          :num="listData.increment_questions"
          color="#f76137"
          text="新增试题"
        ></myLi>
        <myLi
          :num="listData.total_questions"
          color="#f76137"
          text="总试题量"
        ></myLi>
        <myLi
          :num="listData.total_done_questions"
          color="#55cd78"
          text="总刷题量"
        ></myLi>
        <myLi
          :num="listData.personal_questions"
          color="#55cd78"
          text="人均刷题量"
        ></myLi>
      </ul>
    </el-card>
    <el-card class="body-card">
      <div id="myChart" :style="{ width: 'auto', height: '600px' }"></div>
    </el-card>
  </div>
</template>

<script>
// 导入接口
import { getChart, companyChart } from '../../../api/chart'
// 导入组件
import myLi from './component/li'
export default {
  name: 'chart',
  components: {
    myLi
  },
  data () {
    return {
      listData: {},
      comData: []
    }
  },

  created () {
    getChart().then(res => {
      // console.log('列表获取', res)
      this.listData = { ...res.data.data }
      console.log('存储的数据', this.listData)
    })

    // hotCityChart().then(res => {
    //   console.log('热门城市数据', res)
    // })
  },
  mounted () {
    this.drawPie()
  },
  methods: {
    drawPie () {
      companyChart().then(res => {
        // console.log('公司数据', res)
        this.comData = res.data.data
        this.drawLine(this.comData)
      })
    },
    drawLine (data) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      const option = {
        title: {
          text: '整体数据',
          left: '10%',
          textStyle: {
            color: '#666',
            fontFamily: 'Microsoft YaHei Regular',
            fontSize: '21px',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          // left: 'right',
          right: '10%',
          textStyle: {
            color: '#666',
            fontFamily: 'Microsoft YaHei Regular',
            fontSize: '18px',
            fontWeight: 'normal'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['60%', '90%'],
            center: ['50%', '51%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'center',
              fontSize: '36'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'normal'
              }
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        // 让图表重新加载适配
        myChart.resize()
      })
      // console.log(myChart.setOption)
    }
  }
}
</script>
<style lang="less">
#chart-container {
  display: flex;
  flex-direction: column;
  .head-card {
    .el-card__body {
      padding: 0 0;
    }
    margin-bottom: 20px;
    height: 150px;
    ul {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      padding-left: 0;
      text-align: center;

      li {
        box-sizing: border-box;
        list-style: none;
        margin: 0 46px;
        width: 100px;
        .num-box {
          box-sizing: border-box;
          margin-bottom: 10px;
          height: 100px;
          width: 100px;
          border: 2px solid #0086fa;
          line-height: 94px;
          border-radius: 50%;
          font-family: Microsoft YaHei Regular;
          font-size: 35px;
          color: #0086fa;
        }
        .text-box {
          font-family: Microsoft YaHei Regular;
          font-size: 16px;
          color: #737373;
        }
        // div {
        //   box-sizing: border-box;
        //   height: 100px;
        //   width: 100px;
        //   border: 2px solid #0086fa;
        //   line-height: 94px;
        //   border-radius: 50%;
        //   font-family: Microsoft YaHei Regular;
        //   font-size: 35px;
        //   color: #0086fa;
        // }

        // p {
        //   font-family: Microsoft YaHei Regular;
        //   font-size: 16px;
        //   color: #737373;
        // }
        .originColor {
          border: 2px solid #f76137;
          span {
            color: #f76137;
          }
        }
        .lightGreen {
          border: 2px solid #55cd78;
          span {
            color: #55cd78;
          }
        }
        p {
          margin: 10px 0 0;
        }
      }
    }
  }
  .body-card {
    flex: 1;
    height: 100vh;
    .el-card__body {
      padding: 34px 55px;
    }
  }
}
</style>
